<template>
	<view class="">
		<view class="" style="margin-bottom: 20rpx;" >
			<view class="topView">
				
				</view>
				<view class="" style="margin-top: -342rpx;padding: 30rpx 0rpx;">
					<view class="topTitle">
						
<!-- 数码美美租 -->
					</view>
					<!-- <image class="titleImage" src="@/static/lease/title.png" mode="scaleToFill"></image> -->
					<view @click="searchClick()" class="searchView flex-row-flex-start">
							<image class="searchImage" src="/static/lease/ss.png" mode="scaleToFill"></image>
							<view class="searchTitle">
								搜索关键字
							</view>
						</view>
						<view class="" style="height: 40rpx;background: #000;">
							
						</view>
					<swipers :pid="1"  padding="0rpx 0"></swipers>
			
					<view class="" style="margin: 0rpx 0rpx;margin-bottom: 0rpx;">
						<!-- <scroll-view scroll-x="true"  > -->
							<view class="flex-row-flex-start flex-wrap">
								<view  v-for="(item,index) in leaseClassifyList" :key="index"  @click="itemClick(item)" style="width: 20%;" >
									<view  class="itemClass flex-column-center">
										<image class="classImage" :src="item.image" mode="scaleToFill"></image>
										<view class="nameClass">
											{{ item.name }}
										</view>
										
									</view>
								</view>
							</view>
						<!-- </scroll-view> -->
					</view>
				</view>
		</view>
		<view v-for="(item,index) in zoneList" :key="index">
			<view class="zoneItem">
				<image @click="zoneListClick(item)" class="zone1" :src="item.image" mode="widthFix"></image>
				<scroll-view  scroll-x="true">
					<view class="flex-row-flex-start" style="margin: 0 20rpx;">
						<view v-if="!(index1%2)" v-for="(item1,index1) in item.goodsList" :key="index1">
							<view @click="itemClick1(item1)" class="zoneItem1 flex-column-center">
								<image class="zoneImage" :src="item1.image" mode="aspectFit"></image>
								<view class="zoneName">
									{{item1.name}}
								</view>
								<view class="" style="margin-top: 0rpx;">
									<text class="price" style="margin-right: 4rpx;">¥</text>
									<!-- 整数 -->
									<text class="price1">{{item1.price}}</text>
		
									<!-- 单位 -->
									<text class="price">/天起</text>
								</view>
		
							</view>
						</view>
					</view>
					<view class="flex-row-flex-start" style="margin: 0 20rpx;">
						<view v-if="index1%2" v-for="(item1,index1) in item.goodsList" :key="index1">
							<view @click="itemClick1(item1)" class="zoneItem1 flex-column-center">
								<image class="zoneImage" :src="item1.image" mode="aspectFit"></image>
								<view class="zoneName">
									{{item1.name}}
								</view>
								<view class="" style="margin-top: 0rpx;">
									<text class="price" style="margin-right: 4rpx;">¥</text>
									<!-- 整数 -->
									<text class="price1">{{item1.price}}</text>
							
									<!-- 单位 -->
									<text class="price">/天起</text>
								</view>
							
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- <image style="width: 100%;" src="/static/lease/bottom.png" mode="widthFix"></image> -->
		<!-- <lease :list="goodsList"></lease> -->
	</view>
</template>

<script>
    import { 
        getLeaseClassify,
        getLeaseGoodsList,
		getIndexZoneList
    } from '@/api/lease.js';
    
	import {
		getSearchpage,
		clearSearch
	} from '@/api/store';
    
	import { loadingFun, formatPrice } from '@/utils/tools';
	import { loadingType } from '@/utils/type';


	export default {
		data() {
			return {
				zoneList:[],
				keyword: '',                    // 搜索内容
				status: loadingType.LOADING,    // 加载状态
				page: 1,                        // 当前数据页面
				goodsType: 'double',            // 商品列表样式展示方式
				goodsList: [],                  // 商品列表数据
				priceSort: '',                  // 价格排序
				saleSort: '',                   // 销量排序
                classify_id: '',                // 分类ID
				showHistory: false,             // 显示搜索历史
				historyList: [],                // 搜索历史数据列表
				hotList: [],                    // 热门搜素数据列表
                leaseClassifyList: [],          // 租赁分类列表
			};
		},
		watch: {
			// 监听属性
			keyword(value, old) {
				if (!value && !this.id) this.showHistory = true
			},
            // 是否处于搜索
			showHistory(value) {
				if (value) this.getSearchpageFun();
			}
		},
		computed: {
			comprehensive() {
                const priceSort = this.priceSort;
                const saleSort = this.saleSort;
                
                return (!priceSort && !saleSort) ? true : false;
			}
		},

		onLoad(options) {
			if(options.shop_id){
				uni.setStorageSync('shop_id', options.shop_id)
			}
            // 获取分类列表数据
            getLeaseClassify().then(res => {
                if (res.code != 1) return;
                this.leaseClassifyList = res.data;
                // this.classify_id = res.data[0].id || '';
                // 商品列表数据请求
                this.getGoodsList();
            });
			this.getIndexZoneList()
		},

        // 上拉加载更多数据
		onReachBottom() {
			this.getGoodsList();
		},
        
		methods: {
            // 格式化价格输出
            formatPrice,
			zoneListClick(item){
				uni.navigateTo({
					url:'zoneList?classify_id='+item.id+'&title='+item.name
				})
			},
			itemClick1(item) {
			uni.navigateTo({
			                   url: '/bundle/pages/lease_goods_details/lease_goods_details'
			                     + '?' +'id=' + item.id
			               })
						},
			getIndexZoneList(){
				// 请求
				getIndexZoneList( ).then(res => {
				    console.log(res);
				   this.zoneList=res.data
				});
			},
            itemClick(item){
				uni.switchTab({
					url:'/pages/lease/classify?classify_id='+item.id 
				})
			},
            // 更改商品排序样式
			changeType() {
				this.goodsType = this.goodsType === 'one' ? 'double' : 'one'
			},
			searchClick(){
				uni.navigateTo({
					url:'/pages/lease/search'
				})
			},

            // 清空搜索记录
			clearSearchHistory() {
				clearSearch().then(res => {
					if (res.code != 1) return;
                    this.getSearchpageFun();
				});
			},
			
			// 点击取消搜索
			onCancelSearch() {
				this.showHistory = false;
				// this.onRefresh();
			},
            
            // 点击分类
            onClassify(goods_id) {
                this.classify_id = goods_id;
                this.onRefresh();
            },

            // 点击综合
			onNormal() {
				this.priceSort = ''
				this.saleSort = ''
				this.onRefresh();
			},

            // 点击价格排序
			onPriceSort() {
				this.saleSort = ''
				this.priceSort = this.priceSort == 'asc' ? 'desc' : 'asc'
				this.onRefresh();
			},

            // 点击销量排序
			onSaleSort() {
				this.priceSort = ''
				this.saleSort = this.saleSort == 'desc' ? 'asc' : 'desc'
                this.onRefresh();
			},

            // 获取搜索变化
			getSearchpageFun() {
				getSearchpage().then(res => {
					if (res.code != 1) return;
                    const data = res.data;
					this.hotList = data.hot_lists
					this.historyList = data.history_lists
				});
			},
            
            // 搜索
			onSearch() {
				this.onRefresh();
			},
            
            // 刷新列表数据
			onRefresh() {
				this.showHistory = false
				this.page = 1
				this.goodsList = []
				this.status = loadingType.LOADING
				this.$nextTick(() => this.getGoodsList());
			},

            // 根据字符串搜索内容
			onChangeKeyword(item) {
				this.keyword = item;
				this.showHistory = false;
				this.onRefresh();
			},
            
            // 获取商品列表数据
            getGoodsList() {
            	if (this.status == loadingType.FINISHED) return;
                // 参数
                const field = {
                    category_id: this.classify_id,
                    keyword: this.keyword,
                    price: this.priceSort,
                    sales_sum: this.saleSort,
                }
                // 请求
            	loadingFun(
                  getLeaseGoodsList, 
                  this.page, 
                  this.goodsList, 
                  this.status, 
                  field
                ).then(res => {
                    console.log(res);
                    if (!res) return;
                    this.page = res.page;
                    this.goodsList = res.dataList;
                    this.status = res.status;
                });
            },
            
            // 查看商品详情
            goGoodsDetail(goods_id) {
                uni.navigateTo({
                    url: '/bundle/pages/lease_goods_details/lease_goods_details'
                      + '?' +'id=' + goods_id
                })
            }
		}
	};
</script>

<style scoped>
	page{
		padding-bottom: 0;
	}
	.topTitle{
		margin-left: 68rpx;
		height: 84rpx;
		line-height: 84rpx;
		font-size: 47rpx;
		font-family: PingFang HK-Regular, PingFang HK;
		font-weight: 700;
		color: #FFFFFF;
	}
.topView{
	
	padding: 30rpx 20rpx;
	/* padding-top: var(--status-bar-height); */
	/* padding-top: 156rpx; */
	/* padding-top: 200rpx; */
	height: 396rpx;
	background:#000000;
	border-radius: 0rpx 0rpx 0rpx 0rpx;
	opacity: 1;
}
.searchView{
	margin: 20rpx;
	padding:0 22rpx ;
	
	height: 74rpx;
	border: 2rpx solid #4C4C4C;
	/* background: #FFFFFF; */
	border-radius: 40rpx 40rpx 40rpx 40rpx;
	opacity: 1;
}
.searchImage{
	width: 28rpx;
	height: 28rpx;
}
.searchTitle{
	margin-left: 18rpx;
	font-size: 27rpx;
	font-family: PingFang HK-Regular, PingFang HK;
	font-weight: 400;
	color: #999999;
}
.itemClass{
	margin-top: 20rpx;
	/* margin-right: 62rpx; */
}
.classImage{
	width: 88rpx;
	height: 88rpx;
	border-radius: 30%;
}
.nameClass{
	margin-top: 17rpx;
	font-size: 24rpx;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 500;
	color: #333333;
}
.titleImage{
	margin-left: 68rpx;
	margin-bottom: ;
	width: 258rpx;
	height: 64rpx;
}
.zoneItem {
	padding-bottom: 20rpx;
		margin: 20rpx;
		/* height: 447rpx; */
		background: #00000005;
		border-radius: 15rpx 15rpx 15rpx 15rpx;
		opacity: 1;
	}

	.zone1 {
		width: 100%;
		/* height: 122.14rpx; */
		/* background: red; */
	/* 	width: 100%;
		height: 122.14rpx;

		/* background-image: url('../../static/lease/zone.png'
			); */ 
		background-size: 100% 100%;
	}

	.zoneTitle {
		font-size: 31rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}

	.zoneTitle1 {
		margin-left: 20rpx;
		font-size: 27rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
	}

	.zoneTitle2 {
		margin-top: 5rpx;
		font-size: 25rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
	}

	.zoneItem1 {
		margin-top: 20rpx;
		margin-right: 20rpx;
		width: 212rpx;
		height: 286rpx;
		background: #FFFFFF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		opacity: 1;
	}

	.zoneImage {
		width: 149rpx;
		height: 130rpx;
	}

	.zoneName {
		margin-top: 20rpx;
		font-size: 23rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #000000;
	}

	.price {
		font-size: 19rpx;
		font-family: DIN-Medium, DIN;
		font-weight: 500;
		color: #FF5B5B;
	}

	.price1 {
		font-size: 38rpx;
		font-family: DIN-Medium, DIN;
		font-weight: 500;
		color: #FF5B5B;
	}
</style>
